<template>
    <div class="box">
        <el-row :gutter="20" v-if="statisticOneList.length === 0">
            <el-col :span="6" v-for="i in 4" :key="i">
                <el-skeleton style="width: 240px" :loading="true" :animated="true">
                    <template #template>
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <el-skeleton-item variant="text" style="width: 40%;" />
                                    <el-skeleton-item variant="text" style="width: 20%" />
                                </div>
                            </template>
                            <el-skeleton-item variant="h1" style="width: 30%" />
                            <el-divider />
                            <div class="bottom-span">
                                <el-skeleton-item variant="text" style="width: 50%" />
                                <el-skeleton-item variant="text" style="width: 20%" />
                            </div>
                        </el-card>
                    </template>
                </el-skeleton>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="elRow" v-else>
            <el-col :span="6" v-for="item, index in statisticOneList" :key="index" class="el-col">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.title }}</span>
                            <el-tag class="ml-2" :type="item.unitColor">{{ item.unit }}</el-tag>
                        </div>
                    </template>
                    <div class="text item">
                        <count-to :num="item.value"></count-to>
                    </div>
                    <el-divider />
                    <div class="bottom-span">
                        <span>{{ item.subTitle }}</span>
                        <span>{{ item.subValue }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 导航列表 -->
        <nav-list></nav-list>
        <!-- 统计图表 -->
        <el-row :gutter="20" class="echarts-box">
            <el-col :span="12" >
                <echarts></echarts>
            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>
</template>
<script setup lang='ts'>
import { statisticsOneApi } from '@/api/backstage'
import { ref, onMounted } from 'vue'
import countTo from '@/components/countTo.vue'
import navList from './components/navList.vue'
// 统计图标
import echarts from './components/echarts.vue'
const statisticOneList = ref([]) as any

onMounted(async () => {
    statisticsOneApi().then(res => {
        statisticOneList.value = res.data.data.panels
        console.log(statisticOneList.value);

    })

})

</script>
<style lang='scss' scoped>
.box{
    width: 100%;
    height:100%;
    margin-top: 10px;
    overflow: scroll;
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    margin-bottom: 18px;
    font-size: 26px;
    color: rgb(231, 141, 24);
}

.box-card {
    height: 200px;
}

.el-col:hover .box-card {
    box-shadow: 0 0 5px #333;
}
.el-col{
    min-width: 220px;
}
.el-row {
    padding:0 20px;
    flex-wrap: nowrap;
}

.bottom-span {
    display: flex;
    justify-content: space-between;
}
.echarts-box{
    width: 100%;
    height: 500px;
}
</style>